<template>
  <div class="input-box-self">
    <div class="num" v-show="editSelf === 0" @click="changeInputValue($event)">
      <div>{{ value }}</div>
    </div>
    <div class="edit" v-show="editSelf === 1">
      <el-input
        :size="this.size"
        :value="value"
        @input="inputValue"
        placeholder="请输入"
        @keydown.native="keypress"
        @blur="blur"
      >
      </el-input>
      <el-button v-if="showOkButton" :size="this.size" :type="this.buttonType" @click="enter" >确定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  props: {
    value: {
      type: [String, Number],
      require: true,
      default() {
        return '';
      }
    },
    beforeClose: {
      type: Function,
      default: null,
    },
    field: {
      type: String,
      default() {
        return '';
      }
    },
    showOkButton: {
      type: Boolean,
      default() {
        return false;
      }
    },
    size: {
      type: String,
      default() {
        return 'small';
      }
    },
    buttonType: {
      type: String,
      default() {
        return 'primary';
      }
    },
  },
  data() {
    return {
      editSelf: 0,
      oldValue: null,
      // 这个参数是为了enter和blur事件防止同时触发
      enterEnable: false,
    };
  },
  methods: {
    // 单击修改折扣价
    changeInputValue($event) {
      // 获取焦点
      this.editSelf = 1;
      let numNode = null;
      if ($event.target.parentNode.classList.contains('num')) {
        numNode = $event.target.parentNode;
      } else if ($event.target.classList.contains('num')) {
        numNode = $event.target
      }
      if (numNode) {
        setTimeout(() => {
          numNode.parentNode.querySelector('input').focus();
        }, 50);
      }

      this.oldValue = this.value;
      this.enterEnable = false;
    },
    inputValue(value) {
      this.$emit('update:value', value);
    },
    keypress(event) {
      // console.log('keypress', event.keyCode);
      if (event.keyCode === 27) {
        this.editSelf = 0;
        this.$emit('update:value', this.oldValue);
        this.$emit('cancel');

      }

      if (event.keyCode === 13) {
        this.enter()
      }
    },
    enter() {
      const done = () => {
        this.editSelf = 0;
        this.$emit('enter', this.value);
        this.enterEnable = true;
      };
      if (!this.beforeClose) {
        done();
      } else {
        const result = this.beforeClose(this.value, this.field);
        if (result) {
          done();
        }
      }
    },
    blur() {
      if (!this.enterEnable && !this.showOkButton){
        console.log('blur');
        this.editSelf = 0;
        if (this.value) {
          if (!this.beforeClose) {
            this.$emit('update:value', this.oldValue);
          } else {
            const result = this.beforeClose(this.value, this.field);
            if (!result) {
              this.$emit('update:value', this.oldValue);
            } else {
              this.$emit('enter', this.value);
            }
          }
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.input-box-self{
  min-height: 20px;
  .num{
    width: 100%;
    height: 100%;
    min-height: 20px;
  }
  .edit{
    display: flex;
  }
}
</style>
